<template>
  <div class="hover_main_container" v-show="isShowHoverPopup">
    <!-- <div class="hover_main_title">
      <span>{{dataList.address_name}}</span>
    </div> -->
    <!-- <div class="hover_close" @click="doCloseHoverPopup"></div> -->
    <div class="hover-content grid">
      <div
        class="content-item "
       
        v-for="(value, key, index) in nameArray"
        :key="index"
      > <!-- :class="value.indexOf('最新采集时间') >= 0 ? 'sites':''" -->
          <span>{{ value}} :</span>
          <span> &nbsp;&nbsp;{{ dataList[key]!=null ? dataList[key] : '/'}}{{ dataList[key] ? unit[key]: "" }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getPOIHoverData, getGuanXianHoverData, getSFZHover } from "@/api/apiPOI";
import { getBoxLineData } from "@/api/http";
import { FenJieJianKongDian, FeiFenJieJianKongDian, BengZhanDian, XuShuiChiDian, ShouFeiZhanDian, unitList, GuanXianHover }from '@/until/NameList';

export default {
  name: "CurrentData",
  components: {},
  props: {
    paramsData: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  watch: {
    paramsData: {
      handler(newVal, oldVal) {
        this.isShowHoverPopup = false;
        if(newVal && newVal.hasOwnProperty('sttp')){
           // sttp: 0 => 分界监控点， 1 =》 非分界监控点， 2=》 蓄水池， 3 =》 泵站， 4 =》 水厂， 5 =》收费站
            if(newVal && newVal.hasOwnProperty('sttp') && newVal.sttp == "5"){
              getSFZHover( {orgId: newVal.deviceId}).then(res => {
                this.dataList = res[0];
                this.nameArray = this.nameList[this.paramsData['sttp']];
                this.isShowHoverPopup = true;
                this.$parent.titleText = res[0].org_name;
              })
            }else{
              getPOIHoverData({deviceId:newVal.deviceId, sttp: newVal.sttp}).then(res => {
                let paramType = (value, type) => Object.prototype.toString.call(value).includes(type);
                if( paramType(res, 'Object')){
                  this.dataList = res;
                  this.nameArray = this.nameList[this.paramsData['sttp']]
                  this.isShowHoverPopup = true;
                  this.$parent.titleText = res.address_name;
                }
              })
            }
           
        }
      },
      immediate:true
    }
  },
  computed: {
    newDataList() {

    }
  },
  created() {
    // console.log("=======",this.paramsData);
  },
  data() {
    return {
      isShowHoverPopup: true,
      dataList: {
          // "valueErr": "故障",
          // "MODE": "远程",
          // "tm": "2023-06-16 11:41:00",
          // "kd": 100.00,
          // "sumw": 111.00,
          // "address_name": "输水东干管供水北干二分干一支管(GJC2-2)",
          // "statu": "全开",
          // "press": 0.50,
          // "sq": 0.000
      },
      reqParams: this.paramsData,
      nameArray: [],
      //0：分界监控点；1：非分界监控点；2：蓄水池；3：泵站
      //sttp: 0 => 分界监控点， 1 =》 非分界监控点， 2=》 蓄水池， 3 =》 泵站， 4 =》 水厂， 5 =》收费站
      nameList: {
        0: FenJieJianKongDian,
        1: FeiFenJieJianKongDian,
        2: XuShuiChiDian,
        3: BengZhanDian,
        5: ShouFeiZhanDian,
      },
      unit: unitList
      
    };
  },

  methods: {
    doCloseHoverPopup() {
      this.isShowHoverPopup = false;
    },

  }
  }
</script>

<style lang="scss" scoped>
  .hover_main_container {
    // width: 100%;
    // height: 300px;
    // background-color: rgba(123, 232, 158, 0.1);
  }

  .hover_main_container:after {
    // content: "";
    // position: absolute;
    // border-width: 10px;
    // border-style: solid;
    // border-color: rgb(20, 63, 91) transparent transparent transparent;
    // top: 300px;
    // left: 200px;
  } 

  .hover_main_title {
    height: 42px;
    font-family: SourceHanSansCN-Regular;
    font-size: 18px;
    background-size: 100% 100%;
    text-align: left;
    padding-left: 20px;
    background-color: rgba(123, 232, 158, 0);
  }

  .hover_main_title span {
    font-family: SourceHanSansCN-Regular;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 42px;
    letter-spacing: 0px;
    color: #ffffff;
    background-image: linear-gradient(to bottom,
        #fff 30%,
        #00baff);
    /*  背景线性渐变 */
    background-clip: text;
    -webkit-background-clip: text;
    /* 背景被裁减为文字的前景色 */
    -webkit-text-fill-color: transparent;
    /* 文字填充为透明，优先级比color高。  */
  }

  .hover_close {
    width: 14px;
    height: 15px;
    background: url("@/assets/poipopup/poi_popup_close.png");
    position: relative;
    top: -24px;
    left: 386px;
    cursor: pointer;
  }

  .hover-content {
    // padding: 18px 0;
  }

  .content-item {
    display: flex;
    justify-content: flex-start;
    padding: 2px 0;

    span:nth-child(2n + 1) {
      width: 110px;
      text-align: right;
      font-family: SourceHanSansCN-Regular;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 0px;
      color: #daf0ff;
    }

    span:nth-child(2n) {
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 0px;
      color: #00baff;
    }
  }

  .grid {
    // border: 1px solid gray;
    // width: 400px;
    // height: 200px;
    // display: grid;
    // grid-template-columns: repeat(2, 1fr);
    // overflow: hidden;
    // grid-auto-flow: row;
    // grid-gap: 5px;
    // grid-auto-rows: 50px;
    display: grid;
    // grid-template-columns: 100px 300px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
    grid-gap: 5px;
    // grid-auto-rows: 50px;
  }

  .sites {
    grid-column-start: span 2;
  }
</style>